<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            width: 1000px;
            margin: 0 auto;
        }

        input {
            width: 100%;
            height: 40px;
        }

        textarea {
            width: 100%;
        }

        .item {
            padding: 10px 0;
            border-bottom: 1px solid #919191;
        }

        .content {
            margin-top: 5px;
        }

        .remove {
            float: right;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    let context = React.createContext();
    console.log(context)
    class App extends React.Component {
        state = {
            list: [
                {
                    name: "小明",
                    content: "学习使我快乐！！！"
                }, {
                    name: "小红",
                    content: "好好学习天天向上！！！"
                }
            ]
        }
        render() {
            let { name, content, list } = this.state
            return (
                <div className='box'>
                    <context.Provider value={{
                        list: list, setList: (msg) => {
                            console.log(msg)
                            list.push(msg);
                            this.setState({
                                list: list
                            })
                        }, remove: (index) => this.remove(index)
                    }}>
                        <One />
                        <Child />
                    </context.Provider>
                </div>
            )
        }
        remove = (index) => {
            this.state.list.splice(index, 1);
            this.setState({
                list: this.state.list
            })
        }

    }
    class One extends React.Component {
        state = {
            name: "",
            content: ""
        }
        render() {
            let { name, content } = this.state;
            return <context.Consumer>
                {
                    (value) => {
                        return (
                            <div>
                                <div>
                                    <h2>评论人：</h2>
                                    <div>
                                        <input type="text" value={name} onChange={(e) => {
                                            this.setState({
                                                name: e.target.value
                                            })
                                        }} />
                                    </div>
                                </div>
                                <div>
                                    <h2>评论内容：</h2>
                                    <div>
                                        <textarea rows="10" value={content} onChange={(e) => {
                                            this.setState({
                                                content: e.target.value
                                            })
                                        }}></textarea>
                                    </div>
                                </div>
                                <button onClick={() => {
                                    value.setList({ name, content })
                                    this.setState({
                                        name: "",
                                        content: ""
                                    })
                                }}>发表</button>
                            </div>
                        )
                    }
                }
            </context.Consumer>

        }
    }
    class Child extends React.Component {
        state = {

        }
        render() {
            return <context.Consumer>
                {
                    (value) => {
                        return (
                            <div>
                                <h1>留言板</h1>
                                <div>
                                    {
                                        value.list.map((item, index) => {
                                            return (
                                                <div key={index} className='item'>
                                                    <div>
                                                        作者：  {item.name}
                                                    </div>
                                                    <div className='content'>
                                                        内容： {item.content}
                                                        <button className='remove' onClick={() => {
                                                            value.remove(index)
                                                        }}>删除</button>
                                                    </div>

                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    }
                }
            </context.Consumer>


        }

    }

    ReactDOM.render(<App />, document.getElementById('root'))
</script>

</html>